<template>
	<view class="bg-light" style="min-height: 650px;">
		<tabsTop tabName="退款/售后"></tabsTop>
		<view v-for="(item,index) in salesAfter" :key="index" class="bg-white mb-2">
			<!-- 店铺名称 -->
			<view class="p-2" style="font-size: 13px;">店铺：小康龙江</view>
			<!-- 商品信息 -->
			<view class="flex bg-light p-2">
				<image :src="Domain_IMG+item.children[0].Picture_URL" style="width: 80px;height: 80px;"></image>
				<view class="ml-1" style="font-size: 11px;">{{item.children[0].Article_Name}}</view>
			</view>
			<!-- 售后方式 -->
			<view class="flex p-2 align-center" style="font-size: 10px;border-bottom: 1px solid #f5f6f8;">
				<image :src="Domain_ICON+'/pocketMoney.png'" style="width: 20px;height: 20px;"></image>
				<!-- 售后方式 -->
				<!-- <view>{{item.anotherValue}}</view> -->
				<view class="ml-1">仅退款</view>
				<!-- 进度 -->
				<view class="ml-1">{{getRowStatus(item.children[0].Refund_Type,item.children[0].Refund_Time)}}</view>
			</view>
			<!-- 查看详情 -->
			<view class="button">
				<button class="but" @click="goRefundD()">查看详情</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import {
		getOrders
	} from '@/api/orders.js';
	export default {
		components: { //轮播图组件
			tabsTop,
		},
		data() {
			return {
				Domain_ICON: app.globalData.Domain_ICON,
				Domain_IMG: app.globalData.Domain_IMG,
				form: {
					page: 1,
					limit: 10,
					Open_ID: app.globalData.Open_ID,
					App_ID: app.globalData.App_ID,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					Row_Status: '4',
					Article_Name: '',
				},
				salesAfter: [],
			}
		},
		onLoad() {
			this.getData(this.form)
		},
		methods: {
			async getData(form) {
				const res = await getOrders(form)
				console.log('111', res);
				this.salesAfter = res.tableData;
				console.log('salesAfter', this.salesAfter);
			},
			getRowStatus(status, refundTime) {
				switch (status) {
					case '0':
						return this.getRemainingTime(refundTime);
					case '1':
						return "退款成功";
					case '3':
						return "商家拒绝退款";
					default:
						return "";
				}
			},
			getRemainingTime(refundTime) {
				const remainingDays = 7; // Assuming 7 days for refund processing
				const now = new Date();
				const refundDate = new Date(refundTime);
				refundDate.setDate(refundDate.getDate() + remainingDays);
				const timeDifference = refundDate.getTime() - now.getTime();

				if (timeDifference <= 0) {
					return "等待商家处理退款申请，已超时";
				}

				const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
				const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
				const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));

				return `等待商家处理退款申请，还剩${days}天${hours}时${minutes}分`;
			},
			goRefundD() {
				uni.navigateTo({
					url: `/pages/my/refundDetails?Sales_Order_SerialNumber=${this.good.children[0].Sales_Order_SerialNumber}`
				});
			}
		}
	}
</script>

<style>
	.button {
		display: flex;
		justify-content: flex-end;
		padding: 10px;
	}

	.but {
		width: 16%;
		padding: 0px;
		font-size: 11px;
		background-color: white;
		margin: 0;
	}
</style>